<template>
  <div class="app-drawer">
    <el-drawer
      class="pluginDrawer"
      title="插件设置"
      lock-scroll
      :direction="direction"
      :modal-append-to-body="false"
      :size="size"
      append-to-body
      :visible.sync="drawer"
      :wrapper-closable="false"
      @close="close"
    >
      <div class="table-container table-fullscreen">
        <div class="button">
          <!--  v-permission="['APPLICATIONSYSTEM_ADDPLUGIN_BUTTON']" -->
          <el-button type="primary" @click="handleEdit('create', '')">新增</el-button>
        </div>
        <dt-table
          ref="table"
          v-loading="loading"
          :table-opts="tableOpts"
          :is-show-column="false"
          :pagination-data="{
            total: total,
            queryParams: filterForm
          }"
          @pagination="getList"
        />
      </div>
    </el-drawer>
    <plugin-manage ref="pluginManageRef" :plugin-type="1" @getPluginList="getList" />
  </div>
</template>
<script>
import pluginManage from './pluginManage.vue'
import pluginConfigApi from '@/framework/api/developerCenter/application-system/pluginConfig'

export default {
  name: 'ApplicationSystem',
  components: {
    pluginManage
  },
  data() {
    return {
      drawer: false,
      direction: 'rtl',
      loading: false,
      multipleSelection: [],
      total: 0,
      tableOpts: {
        rowKey: 'pluginId',
        firstTableCol: {
          select: false,
          width: 70
        },
        indexTableCol: {
          index: true
        },
        tableCol: [
          {
            prop: 'className',
            label: '插件路径',
            show: true
          },
          {
            prop: 'enable',
            label: '是否启用',
            show: true,
            type: 'switch',
            activeValue: 1,
            inactiveValue: 0,
            switchChange: (row, value) => { return this.statusChange(row) }
          },
          {
            prop: 'remark',
            label: '描述',
            show: true,
            width: 300
          }
        ],
        operator: {
          fixed: 'right',
          align: 'center',
          width: 146,
          operatorBtn: [
            {
              text: '编辑',
              // permission: ['APPLICATIONSYSTEM_UPDATEPLUGIN_BUTTON'],
              click: (row, col, cellValue) => {
                return this.handleEdit('update', row)
              }
            },
            {
              text: '删除',
              // permission: ['APPLICATIONSYSTEM_DELPLUGIN_BUTTON'],
              type: 'danger',
              click: (row, col, cellValue) => {
                return this.handleDelete(row)
              }
            }
          ]
        },
        tableData: []
      },
      filterForm: {
        pageNo: 1,
        pageSize: 10,
        type: 1
      }
    }
  },
  computed: {
    size() {
      return this.$store.getters.device === 'mobile' ? '375px' : '960px'
    }
  },
  methods: {
    close() {
      this.drawer = false
    },
    handleDelete(row) {
      this.$dtMessageBox({ title: '提示', message: `是否确认删除"${row.className}"？删除后，该插件的业务逻辑将不会执行`, type: 'warning' }).then(() => {
        pluginConfigApi.customFormPluginDelete({ id: row.id }).then((res) => {
          this.getList()
          this.$dtMessage({
            message: '删除成功',
            type: 'success'
          })
        })
      })
    },
    openDrawer() {
      this.drawer = true
      this.filterForm.formId = this.$route.query.formId
      this.getList()
    },
    getList() {
      pluginConfigApi.customFormPluginPage(this.filterForm).then((res) => {
        this.tableOpts.tableData = res.data.rows
        this.total = res.data.totalRows
        this.loading = false
      })
    },
    handleEdit(type, row) {
      this.$refs.pluginManageRef.openDialog(type, row)
    },
    statusChange(row) {
      const params = Object.assign({}, row)
      params.enable = params.enable ? 1 : 0
      pluginConfigApi.customFormPluginEdit(params).then((res) => {
        this.$dtMessage({
          type: 'success',
          message: '状态修改成功'
        })
        this.getList()
      }).catch(() => {
        this.getList()
      })
    }
  }
}
</script>
  <style lang="scss" scoped>
  ::v-deep .pluginDrawer .el-drawer__header{
    margin:20px 24px;
    color: #1D2129;
  }
  ::v-deep .el-drawer__body{
    box-sizing: border-box;
    padding: 0 16px;
  }
  .button{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
  }
  </style>

